import React, { useState, useCallback } from 'react';
import Components from 'Components';

const { Base } = Components;

const offSvg = '<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink><g id="DownFill-DownFill" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="DownFill-编组"><rect id="DownFill-矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect><path d="M40.6640052,13 L7.34128264,13 C6.57572302,13 5.83336217,13.2619065 5.23947349,13.7351762 C3.80578911,14.8838891 3.58308085,16.9699517 4.74301968,18.3897608 L21.404381,38.7725222 C21.5528531,38.9517214 21.7152446,39.1171361 21.9008348,39.2641713 C23.3345192,40.4128842 25.4363283,40.1923313 26.6009069,38.7725222 L43.2576284,18.3897608 C43.740163,17.8016198 44,17.0664436 44,16.3082931 C44.004629,14.4795422 42.505988,13 40.6640052,13 Z" id="DownFill-路径" fill="currentColor" fill-rule="nonzero"></path></g></g></svg>';

export default (props) => {
    const { property, view, pageAxis } = Base.getProps(props);

    const [isVisible, setIsVisible] = useState(property.isVisible !== false);
    const [isExpand, setIsExpand] = useState(property.isExpand);
    const [value, setValue] = useState(property.value || property.text);

    property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };
    property.setValue = (v) => setValue(v);
    property.setIsExpand = () => setIsExpand(!isExpand);

    const onClick = useCallback(() => {
        if (!property.eventActionName && !property.eventAction) return;
        property.disabled = false;
        if (property.eventActionName) pageAxis.invokeEventAction(property.eventActionName, { property, view, pageAxis });
        else if (property.eventAction) pageAxis.invokeEventAction2(property.eventAction, { property, view, pageAxis });
        if (!property.disabled) setIsExpand(!isExpand);
    }, [property, view, pageAxis, setIsExpand, isExpand]);

    if (!isVisible) return null;

    const { style, className } = property;

    return (
        <div className={'divExpandButton buttonActive ' + className} style={style} onClick={onClick}>
            <span className="spanText">{value}</span>
            <span className={isExpand ? 'spanArrow arrowActive' : "spanArrow"} dangerouslySetInnerHTML={{ __html: offSvg }}>
            </span>
        </div>
    );
};